﻿body .DayView {
    background-color: #9b765b;
}

.DayView p {
    margin-left: 120px;
}

.DayView header {
    text-align: center;
    color: #fff;
}

.DayView.fragment header[role=banner] {
    margin-left: 0;
}

.DayView section[role=main] {
    text-align: center;
    display: -ms-grid;
    -ms-grid-columns: 1fr 80% 1fr;
    -ms-grid-rows: auto 100px;
    border: 0px solid green;
}

#calendarday {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: auto 10px auto 10px auto;
    display: -ms-grid;
}

    #calendarday div {
        color: #fff;
    }


#presection {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    border: 0px solid blue;
    text-align: left;
}

#nextsection {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    border: 0px solid blue;
    text-align: right;
}

#presection, #nextsection {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 200px 200px 1fr 1fr;
    display: -ms-grid;
}

#commdayinfo {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

#topline {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

#bottomline {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
}

    #topline div, #bottomline div {
        border-top: 1px solid #c7ad96;
    }

#shareregion {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

#topline div, #bottomline div, #sharegrid {
    width: 500px;
    margin: 10px auto;
}

#daynumber {
    font-size: 8em;
    font-weight: bolder;
}


#lunarday, #gzyear, #gzmonth, #goodbadinfo, #horoscope, #sharebutton {
    font-size: 2em;
}

#goodbadinfo {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    border-top: 0px solid #c7ad96;
    border-bottom: 0px solid #c7ad96;
    -ms-grid-columns: 1fr 100px 1fr;
    -ms-grid-rows: auto;
    display: -ms-grid;
    padding: 20px 0 10px 0;
}

#goodtitle, #badtitle {
    font-size: 1.5em;
}

#splitter {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

#goodsection {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    text-align: right;
}

#badsection {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    text-align: left;
}


#horoscope {
    float: left;
}

    #horoscope:hover, #goodcontent div:hover, #badcontent div:hover {
    }

#sharebutton {
    float: right;
    color: #fff;
}

    #sharebutton:hover {
        font-size: 2.5em;
    }


#preday, #nextday {
    display: block;
    width: 33px;
    height: 41px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
}

#preday {
    float: left;
    background: url(../../images/left.png) no-repeat;
    background-position: bottom left;
    margin-left: 10px;
}

#nextday {
    float: right;
    background: url(../../images/right.png) no-repeat;
    background-position: bottom left;
    margin-right: 10px;
    -ms-grid-column-align: end;
}


    #preday:hover, #nextday:hover {
        background-position: top left;
    }

@media screen and (-ms-view-state: snapped) {

    #topline div, #bottomline div, #sharegrid {
        width: 280px;
    }

    #horoscope {
        text-align: left;
    }

    .DayView .titlearea, #goodtitle, #badtitle {
        font-size: 1.6em;
    }

    #lunarday, #gzyear, #gzmonth, #goodbadinfo, #horoscope, #sharebutton {
        font-size: 1.3em;
    }

    #sharebutton {
        display: none;
    }

    #preday, #nextday {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }
}

@media screen and (max-height:768px) {
    #daynumber {
        font-size: 5em;
    }

    .titlearea div {
        font-size: 0.8em;
    }

    #lunarday, #gzyear, #gzmonth, #goodbadinfo, #horoscope, #sharebutton {
        font-size: 1.5em;
    }

    #preday, #nextday {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        margin-top: 50px;
    }
}
